<script setup>
import KOfooter from '@/components/KOfooter/KOfooter.vue';
import KOheader from '@/components/KOheader/KOheader.vue';
import {ref,onMounted,watch} from "vue"
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);
const showselect=ref(false)
const show=()=>{
  showselect.value=!showselect.value
}
</script>

<template>
  <div class="POOL">
    <KOheader/>
    <div v-if="innerWidth" style="display: flex;">
      <div style="width: 20%; margin-top: 40px; padding-left: 40px; line-height: 40px;">
        <div style="font-weight: 700;">媒體</div>
        <div class="x" style="font-weight: 700;">全部文章</div>
        <div class="x" style="font-weight: 700;">部落格</div>
        <div class="x" style="font-weight: 700;">報導</div>
      </div>
      <div style="width: 80%;">
        <div style="margin-top: 60px; display: flex; padding-bottom: 30px; border-bottom: 1px solid #eeecec ;">
          <img style="width: 700px; height: 400px;" src="https://cdn.quickper.com/media/tagskin/article/cdb437e9-e29c-41ee-988f-8d1eb7ebef8e/w1280h720t1.png" alt="">
          <div style="margin-top: 200px; margin-left:30px ;">
            <div style="font-weight: 700;">F!RR 部落格（傳送門）</div>
            <div>2022 年 09 月 15 日</div>
          </div>
        </div>
        <div>
          <img style="margin-top: 30px; width: 370px; height: 208px;" src="https://cdn.quickper.com/media/tagskin/article/4e038827-e1dc-4299-b611-99b0269e0018/w1280h720t1.png" alt="">
          <div style="font-weight: 700; width: 370px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
            這款「裸光緊緻面膜」零網紅業配就自體爆紅！以植萃為本源的台灣品牌TAG SKIN ，用心鑽研護膚管理，連成分都堅持醫美級
          </div>
          <div style="margin-top: 20px;">2022 年 01 月 14 日</div>
        </div>
      </div>
    </div>
    <div v-else>
      <div style="display: flex; border-bottom: 1px solid rgb(227, 222, 222); padding-bottom: 20px;">
        <div style="margin-left: 20px;">全部文字</div>
        <div style="margin-left: 20px;">部落格</div>
        <div style="margin-left: 20px;">報導</div>
      </div>
      <div style="width: 100%;">
        <div style="margin-top: 20px;padding-bottom: 30px; border-bottom: 1px solid #eeecec ;">
          <img style="width: 100%; height: 220px;" src="https://cdn.quickper.com/media/tagskin/article/cdb437e9-e29c-41ee-988f-8d1eb7ebef8e/w1280h720t1.png" alt="">
          <div style="margin-top: 20px; margin-left:30px ;">
            <div style="font-weight: 700;">F!RR 部落格（傳送門）</div>
            <div>2022 年 09 月 15 日</div>
          </div>
        </div>
        <div>
          <img style="margin-top: 30px;margin-left: 10px;padding-right: 10px; width: 95%; height: 208px;" src="https://cdn.quickper.com/media/tagskin/article/4e038827-e1dc-4299-b611-99b0269e0018/w1280h720t1.png" alt="">
          <div style="font-weight: 700; width: 100%; padding-left: 10px;padding-right: 10px; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
            這款「裸光緊緻面膜」零網紅業配就自體爆紅！以植萃為本源的台灣品牌TAG SKIN ，用心鑽研護膚管理，連成分都堅持醫美級
          </div>
          <div style="margin-top: 20px;margin-left: 10px;margin-right: 10px;">2022 年 01 月 14 日</div>
        </div>
        </div>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped lang="scss">
.POOL {
  background-color: #fff;
  width: 100%;
  height: calc(100vh);
}
.x:hover{
  text-decoration: underline;
}
</style>